<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<script src="/js/jquery-3.5.1.min.js" type="text/javascript"></script>
<head>
    <meta charset="UTF-8">
    <title>Top</title>
    <link rel="stylesheet" href="/css/jqueryui.css" type="text/css" media="screen"/>
    <link rel="StyleSheet" href="/css/jpetstore.css" type="text/css" media="screen"/>

    <meta name="generator"
          content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <title>MyPetStore</title>

    <meta content="text/html; charset=windows-1252"
          http-equiv="Content-Type" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Autocomplete - Default functionality</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $( function() {
            var availableTags = [
                "Amazon Parrot",
                "Finch",
                "Koi",
                "Goldfish",
                "Angelfish",
                "Tiger Shark",
                "Persian",
                "Manx",
                "Bulldog",
                "Chihuahua",
                "Dalmation",
                "Poodle",
                "Golden Retriever",
                "Labrador Retriever",
                "Iguana",
                "Rattlesnake"
            ];
            $('#keyword').on('change',function(){
                $.ajax({
                    type : "GET",
                    url  : "autoWrite",
                    success : function (data) {
                        availableTags = data;
                    }
                });
            });
            $('#keyword').autocomplete({
                source: availableTags
            });
        } );
    </script>
</head>

<script>
    $(function () {
        $('#keyword').on(function () {
        });
    });
</script>

<body>
    <header th:fragment="header">

        <div id="Header">

            <div id="Logo">
                <div id="LogoContent">
                    <a href="/catalog/main"><img src="/images/logo-topbar.gif" /></a>
                </div>
            </div>

            <div id="Menu">
                <div id="MenuContent">
                    <a th:href="@{/cart/viewItem(username=${session.username})}"><img align="middle" name="img_cart" src="/images/cart.gif" /></a>
                    <img align="middle" src="/images/separator.gif" />
                    <td th:if="${(session.username)==NullPointerException}">
                        <a href="/account/SignIn">Sign In</a>
                        <img align="middle" src="/images/separator.gif" />
                    </td>
                    <td th:if="${(session.username)!=NullPointerException}">
                        Welcome!
                        <img align="middle" src="/images/separator.gif" />
                    </td>

                    <td th:if="${(session.username)!=NullPointerException}">
                        <a href="/account/Signoff">Sign Out</a>
                        <img align="middle" src="/images/separator.gif" />
                        <a th:href="@{/account/GoToEdit(username=${session.username})}">My Account</a>
                        <img align="middle" src="/images/separator.gif" />
                    </td>
                    <a href="/help.html">?</a>
                </div>
            </div>

            <div id="Search">
                <div id="SearchContent">
                    <form action="searchProduct" method="post">
                        <input type="text" id="keyword" name="keyword" size="14" /> <input type="submit" name="searchProducts" value="Search" />
                    </form>
                </div>
            </div>

            <div id="QuickLinks">
                <a th:href="@{/catalog/viewCategory(categoryId='FISH')}"><img
                        src="/images/sm_fish.gif" /></a> <img src="/images/separator.gif" />
                <a href="/catalog/viewCategory?categoryId=DOGS"><img
                        src="/images/sm_dogs.gif" /></a> <img src="/images/separator.gif" />
                <a href="/catalog/viewCategory?categoryId=REPTILES"><img
                        src="/images/sm_reptiles.gif" /></a> <img src="/images/separator.gif" />
                <a href="/catalog/viewCategory?categoryId=CATS"><img
                    src="/images/sm_cats.gif" /></a> <img src="/images/separator.gif" />
                <a href="/catalog/viewCategory?categoryId=BIRDS"><img
                        src="/images/sm_birds.gif" /></a>
            </div>

        </div>


    </header>
</body>
</html>